<template>
	<view class="full-page" v-if="totalPage">
		
	</view>
	<view class="content" v-else style="padding-top: 0;">
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar :autoBack="true" bgColor="#fff" :fixed="true" @click-left="$back" ></u-navbar>
		
		<view class="tobox">
			<view class="serbox">
				<image :src="'/images/search.png' | formatImgUrl" class="serpic" mode=""></image>
				<input type="text" class="serput" v-model="keyword" placeholder="搜圈子、用户、内容、橱窗" >
			</view>
			<view class="totxt" @click="getSearch">
				确认
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" v-if="!showSearch">
			<view slot="left">
				
			</view>
			<view slot="center">
				<view class="tobox">
					<view class="serbox" >
						<image :src="'/images/search.png' | formatImgUrl" class="serpic" mode=""></image>
						<input type="text" class="serput" v-model="keyword" placeholder="搜圈子、用户、内容、橱窗" @confirm="getSearch">
					</view>
					<view class="totxt" style="margin-left: 15rpx;" @click="$back">
						取消
					</view>
				</view>
			</view>
			<!-- <view slot="right">
				
			</view> -->
		</u-navbar>
		<!-- #endif -->
		
		

		<view v-if="searchList.length || keyword">
			<view style="padding: 0 30rpx;background-color: #fff;">
				
				<view class="empytView" v-if="!articleList.length">
					<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
					<!-- <view>- 空列表 -</view> -->
				</view>

				<custom-waterfalls-flow  ref="waterfallsFlowRef" v-if="articleList.length>0" :value="articleList"  @imageClick="imageClick" style="padding-top: 20rpx;">
									
									    <!-- #ifdef MP-WEIXIN -->
				       <view class="item" v-for="(item,index) in articleList" :key="index" slot="slot{{index}}"  @click="$go('/pages/find/content?id='+item.id)"> 
											<view v-if="item.image=='https://cdnauth.dreamyuewen.com/images/f1.jpg'" class="emptyImg ">
												<view class="destxt lines">
													{{item.desc}}
												</view>
											</view>
											<view class="cnt">
												<view class="carbox">
													<view class="numtxt" v-if="JSON.parse(item.img).length">
														{{JSON.parse(item.img).length}}
													</view>
													<view class="title oneline" @tap.stop="$goto('/pages/find/content?id='+item.id)">{{item.title}}</view>
													
													<image :src="'/images/ju1.png' | formatImgUrl" @tap.stop="aid=item.id,act_info=item,show1 = true" class="jupic"
														mode=""></image>
												</view>
												
												<scroll-view scroll-x="true" style="white-space: nowrap;width: 100%;">
													<view class="qli" v-for="(item1,index1) in item.tags">
														#{{item1}}
													</view>
												</scroll-view>
												
												
												<view class="haobox">
													<!-- <view class="wen" v-if="item.hot">
														{{$db.get('config').diy_hot_label}}
													</view>
													<view class="wen" v-if="item.sift">
														{{$db.get('config').diy_sift_label}}
													</view>
													<view class="wen" v-if="(!item.hot || !item.sift) && item.gid">
														{{item.gid?item.qz:'默认圈子'}}
													</view> -->
													
													<!-- v-if="!item.gid && !item.hot && !item.sift" -->
													<view style="display: flex;justify-content: flex-start;align-items: center;">
														<image :src="item.pic | formatImgUrl"
															style="width: 45rpx;height: 45rpx;border-radius: 100px;" mode="aspectFill"></image>
														<text
															style="font-size: 24rpx;padding-left: 8rpx;color: #999;width: 165rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.username}}</text>
													</view>
													<view class="display-flex">
														<!-- <view class="ybox mr10">
															<image src="/static/images/tc.png"
																class="hart"></image>
															<view class="ytxt">
																{{item.remark_num}}
															</view>
														</view> -->
														<view class="ybox">
															 <!-- @tap.stop="userLike(1,item.id,index)" -->
															<image :src="(item.isLiked ? '/images/zz1.png' : '/images/zz.png') | formatImgUrl"
																class="hart" style="width: 32rpx;height: 32rpx;"></image>
															<view class="ytxt" :style="{color: item.isLiked ? '#43DC71' : '#999'}">
																{{item.like_num  || '点赞'}}
															</view>
														</view>
													</view>
													
												</view>
											</view>
				       </view>
										<!-- #endif -->
										
										<!-- #ifndef MP-WEIXIN -->
										<template v-slot:default="item">
											<view class="item"  @click="$go('/pages/find/content?id='+item.id)"> 
												<view v-if="item.image=='https://cdnauth.dreamyuewen.com/images/f1.jpg'" class="emptyImg ">
													<view class="destxt lines">
														{{item.desc}}
													</view>
												</view>
												<view class="cnt">
													<view class="carbox">
														<view class="numtxt" v-if="JSON.parse(item.img).length">
															{{JSON.parse(item.img).length}}
														</view>
														<view class="title oneline" @tap.stop="$go('/pages/find/content?id='+item.id)">{{item.title}}</view>
														
														<image :src="'/images/ju1.png' | formatImgUrl" @tap.stop="aid=item.id,act_info=item,show1 = true" class="jupic"
															mode=""></image>
													</view>
													
													<scroll-view scroll-x="true" style="white-space: nowrap;width: 100%;">
														<view class="qli" v-for="(item1,index1) in item.tags">
															#{{item1}}
														</view>
													</scroll-view>
													
													<view class="haobox">
														<!-- <view class="wen" v-if="item.hot">
															{{$db.get('config').diy_hot_label}}
														</view>
														<view class="wen" v-if="item.sift">
															{{$db.get('config').diy_sift_label}}
														</view>
														<view class="wen" v-if="(!item.hot || !item.sift) && item.gid">
															{{item.gid?item.qz:'默认圈子'}}
														</view> -->
														
														<!-- v-if="!item.gid && !item.hot && !item.sift" -->
														<view style="display: flex;justify-content: flex-start;align-items: center;">
															<image :src="item.pic | formatImgUrl"
																style="width: 45rpx;height: 45rpx;border-radius: 100px;" mode="aspectFill"></image>
															<text
																style="font-size: 24rpx;padding-left: 8rpx;color: #999;width: 165rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.username}}</text>
														</view>
														<view class="display-flex">
															<!-- <view class="ybox mr10">
																<image src="/static/images/tc.png"
																	class="hart"></image>
																<view class="ytxt">
																	{{item.remark_num}}
																</view>
															</view> -->
															<view class="ybox">
																 <!-- @tap.stop="userLike(1,item.id,index)" -->
																<image :src="(item.isLiked ? '/images/zz1.png' : '/images/zz.png') | formatImgUrl"
																	class="hart" style="width: 32rpx;height: 32rpx;"></image>
																<view class="ytxt" :style="{color: item.isLiked ? '#43DC71' : '#999'}">
																	{{item.like_num || '点赞'}}
																</view>
															</view>
														</view>
													</view>
												</view>
											</view>
										</template>
										<!-- #endif -->
				   </custom-waterfalls-flow>
			</view>
		</view>


		<view class="libox" v-if="searchList.length<=0&&keyword==''">

			<view class="qbox">
				<view class="qline"></view>
				<view class="qtitle">
					历史搜索
				</view>
				<view class="seemore" v-if="shiList.length > 6" @click="showheight">
					{{ heightauto ? '收起' : '展开' }}
				</view>
			</view>
			<view class="shibox" :class="{'shiactive': heightauto === true}">
				<view class="shili" v-for="item in shiList" @tap.stop="searchKey(item.keyword)" >
					{{item.keyword}}
				</view>
				<view class="shili" v-if="shiList.length==0">
					暂时没有搜索记录
				</view>
			</view>
			<!-- <view class="empytView" v-if="!shiList.length">
				<image :src="'/images/empty.png' | formatImgUrl" mode="widthFix" />
				<view>- 空列表 -</view>
			</view> -->

			<view class="qingbox" @click="delSearchLog" v-if="shiList.length">
				<image :src="'/images/del.png' | formatImgUrl" class="del" mode=""></image>
				<view class="qingtxt">
					清空搜索历史
				</view>
			</view>
		</view>

		<!-- 举报弹框 -->
		<u-popup :show="show" @close="show=false" @open="open">
			<view class="mask">
				<view class="matop" @click="goToreport">
					<image :src="'/images/jing.png' | formatImgUrl" class="mapic" mode=""></image>
					<view class="matxt">
						举报
					</view>
					<image :src="'/images/rarr.png' | formatImgUrl" class="mapic" mode=""></image>
				</view>
				<view class="qubox" @click="show = false">
					取消
				</view>
			</view>
		</u-popup>
		<!-- 是否退出 -->
		<u-popup :show="tuishow" :round="10" mode="center" @close="tuiclose" @open="open">
			<view class="tuichu">
				<view class="tuititle">
					是否退出圈子
				</view>
				<view class="quren">
					<view class="quli" @click="tuishow = false">
						取消
					</view>
					<view class="quli active" @click="queren">
						确认
					</view>
				</view>
			</view>
		</u-popup>
		
		
		<view v-if="show1" class="biaoqian">
			<view class="top">减少标签下内容推荐</view>
			<view class="tab">
				<view  v-for="(item,index) in act_info.tags" >#{{item}}</view>
			</view>
			
			<view class="not_like" v-if="act_info.tags.length>0">
				不喜欢标签可在“设置”中彻底屏蔽
			</view>
			<view class="not_like" v-else>
				该内容未绑定任何标签
			</view>
			<view class="line">
			</view>
			<view class="cont_t display-flex" :class="act_info.tags.length == 0 ? 'cont_t-gray' : ''">
				<view class="t1 display-flex" @click="no_like(1)">
					<image :src="'/images/home_book.png' | formatImgUrl" mode="" v-if="act_info.tags.length > 0"></image>
					<image :src="'/images/home_book1.png' | formatImgUrl" mode="" v-else></image>
					<view class="tex">
						内容不感兴趣
					</view>
				</view>
			</view>
			<view class="cont_b display-flex">
				<view class="t1 display-flex" @click="no_like(2)">
					<image :src="'/images/home_man.png' | formatImgUrl" mode=""></image>
					<view class="tex">
						作者不感兴趣
					</view>
				</view>
				
			</view>
			<image class="cl1" @click="show1=false" :src="'/images/cl1.png' | formatImgUrl" mode=""></image>
		</view>
		<view v-if="show1" @click="show1=false" class="zhezhao">
		</view>
	</view>
</template>
<script>
	import * as db from '@/common/db.js'
	import {
	  TUIConversationService,
	} from "@tencentcloud/chat-uikit-engine";
	export default {
		data() {
			return {
				// 输入框
				inputValue: '',
				// 点击展示隐藏
				heightauto: false,
				shiList: [],
				// 历史记录隐藏
				product: true,
				// 点击切换
				navList: [{
					id: 1,
					name: '约文'
				}, 
				{
					id: 4,
					name: '例文'
				},{
					id: 2,
					name: '评价'
				}, {
					id: 3,
					name: '动态'
				}],
				navIndex: 1,
				keyword: '',
				list: {},
				searchList: [],
				info: {},
				switchBth: true,
				middleShow: false,
				showSearch: false,
				finData: [],
				totalPage: true,
				val: '',
				isClick: true,
				uid: '',
				show: false,
				uid: this.$db.get('userInfo').membe_id,
				userInfo: {},
				list: {},
				page: 1,
				rowList: [],
				showdel:false,
				aid:0,
				is_top:0,
				is_hide:0,
				lw:0,
				status: 0,
				info:null,
				switchBth:true,
				middleShow:false,
				showReport: false,
				type: '',
				is_dong: '',
				isScroll: false,
				isF: false,
				totalPage: true,
				isPing: false,
				animationData: {},
				isClick: true,
				id: 0,
				info: {},
				// 举报弹框
				show: false,
				// 头像
				headList: [],
				// 瀑布流
				list: {},
				tuishow: false,
				page: 1,
				articleList: [],
				hotList: {},
				order_type: 1,
				
				aid: 0,
				timeStamp:"",
				act_info:null,
				
				show1:false,
				loading:false,
				isScroll: false,
				totalPage: true
			}
		},
		onLoad(e) {
			this.uid = e.uid || ''
			this.id = e.id || ''
			uni.onKeyboardHeightChange(this.onKeyboardHeightChange);
			
			this.getUserInfo()
			this.search();
			this.getSearchLog()
		},
		onUnload() {
			uni.offKeyboardHeightChange(this.onKeyboardHeightChange);
		},
		// 上拉加载
		onReachBottom() {
			if (this.list.current_page < this.list.last_page) {
				this.page++; // 页数加一，加载下一页数据
				this.search();
			}
		},
		methods: {
			imageClick(item) {
			
				//go('/pages/find/content?id='+item.id)
				uni.navigateTo({
					url: '/pages/find/content?id=' + item.id
				})
			
			},
			getUserInfo() {
				// console.log(this.uid,777)
				this.$api.default.request('user/userInfo', {
					uid: this.uid
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.userInfo = res.user
						if (!res.user.is_writer) {
							this.navIndex = 3
						}
						this.showReport = false
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			getList() {
				this.$api.default.request('Discover/groupArticle2', {
					gid: this.id,
					sift: 1,
					page: this.page,
					type: this.order_type,
					keyword: this.keyword
				}).then((res) => {
					if (res.code) {
						this.list = res.data
						if (res.data.current_page > 1) {
							res.data.data.forEach((item) => {
								this.articleList.push(item)
							})
						} else {
							this.articleList = res.data.data
						}
					}
					
					this.totalPage = false
				})
			},
			lower(){
				
			},
			tapItem(){
				
			},
			toImRoom() {

				let auth = db.get('auth');
				if (!auth) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				console.log(this.info.uid, 77777777777)


				// this.$store.commit('createConversationActive', this.info.uid)

				// let url = '/pages/tim/room?userType=1&showbox=1&uid=' + this.info.uid
				// uni.navigateTo({
				// 	url: url
				// })
				
				if(!this.isClick){
					return
				}
				this.isClick = false
				uni.request({
				    url: 'https://api.dreamyuewen.com/api/user/userInfo', 
				    data: {
				       uid: this.uid,
				    },
				    header: {
				        token: db.get('auth')
				    },
				    success: (res) => {
				        uni.setStorageSync("userItem",res.data.user);
						
						uni.request({
						    url: 'https://api.dreamyuewen.com/api/user/userPageList', 
						    data: {
						       uid: this.uid,
							   page: 1,
							   type: 1
						    },
						    header: {
						        token: db.get('auth')
						    },
						    success: (ress) => {
						        uni.setStorageSync("userPageList",ress.data.data.data);
								
								uni.request({
								    url: 'https://api.dreamyuewen.com/api/order/getTimOrderList', 
								    data: {
								       uid: this.uid,
								    },
								    header: {
								        token: db.get('auth')
								    },
								    success: (resss) => {
										setTimeout(()=> {
											this.isClick = true
										}, 2000);
								        uni.setStorageSync("orderList",resss.data.data);
										
										TUIConversationService.switchConversation('C2C'+this.uid);
										uni.navigateTo({
											url: '/TUIKit/components/TUIChat/index'
										})
								    }
								});
						    }
						});
				    }
				});
					
					
					
					
					
					
					
				// emits("handleSwitchConversation", item.conversationID);
				
			},
			onKeyboardHeightChange(res) {
				const {
					height,
					duration
				} = res;
				// 键盘弹起
				if (height > 0) {
					console.log('键盘弹起');
				}
				// 键盘收回
				else {
					this.page = 1;
					this.list = {};
					this.getSearch();
					console.log('键盘收回');
				}
			},
			getSearchLog() {
				this.$api.default.request('index/getContentSearchLog').then((res) => {
					if (res.code) {
						this.shiList = res.data
					}
					
					this.totalPage = false
				})
			},
			delSearchLog() {
				this.$api.default.request('index/delContentSearchLog').then((res) => {
					if (res.code) {
						this.$common.successToShow(res.msg, () => {
							this.getSearchLog()
						})
					}
				})
			},
			joinGroup(item) {
				this.$api.default.request('Discover/joinGroup', {
					id: item.id
				}, 'POST').then((res) => {
					if (res.code) {
						this.$common.successToShow(res.msg, () => {
							this.getList()
						})
					}
				})
			},
			searchKey(key) {
				this.keyword = key
				this.page = 1
				this.getSearch()
			},
			getSearch() {
				if (this.keyword) {
					this.$api.default.request('Discover/groupArticle2', {
						gid: this.id,
						sift: 1,
						page: this.page,
						type: this.order_type,
						keyword: this.keyword
					}).then((res) => {
						if (res.code) {
							this.list = res.data
							if (res.data.current_page > 1) {
								res.data.data.forEach((item) => {
									this.articleList.push(item)
								})
							} else {
								this.articleList = res.data.data
							}
						}
						
						this.totalPage = false
					})
				} else {
					this.list = {}
					this.rowList = []
					this.page = 1;
					this.getSearch()
				}
			},
			// 搜索清空
			clearInput() {
				this.inputValue = '';
			},
			// 进入搜索
			search() {
				console.log("搜索操作");
			},
			// 展开收起
			showheight() {
				this.heightauto = !this.heightauto
			},
			// 点击切换
			navTap(item) {
				this.list = {}
				this.articleList = []
				this.navIndex = item.id
				this.page = 1;
				this.getSearch()
			},
			// 当前账号的冻结信息
			getAccountState(){
				this.$api.default.request('index/getStatus', {
					type: 5,//0冻结动态 1冻结聊天 2冻结橱窗 3抢单权限 4发单权限 5下单权限 6提现权限 7充值权限
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.is_dong = res.is_dong
					}
				})
			},
			get_look(uid){
				//uni.getStorageSync('dev_data');
				this.$api.default.request('user/look_user', {
					uid: uid,
				}, 'POST').then((res) => {
				})
				
			},
			is_tops(type){
				this.$api.default.request('user/user_top', {
					id: this.aid,
					type: type
				}, 'POST').then((res) => {
					if (res.code == 1) {
						this.$common.successToShow(res.msg,()=>{
							this.page = 1
							this.list = {}
							this.rowList = []
							this.getList();
							this.showdel = false
						})
					}
				})
			},
			no_gou(){
				this.$common.errorToShow("该用户未开放私信")
			},
			delRow(){
				let auth = db.get('auth');
				if (!auth) {
					uni.navigateTo({
			
						url: '/pages/login/login'
			
					})
					return;
				}
				
				this.$api.default.request('index/delContentSearchLog', {
					id: this.aid,
				}, 'POST').then((res) => {
					if (res.code == 1) {
						this.$common.successToShow(res.msg,()=>{
							this.page = 1
							this.list = {}
							this.rowList = []
							this.getList();
							this.showdel = false
						})
					}
				})
			},
			goToreport() {
				let auth = db.get('auth');
				if (!auth) {
					uni.navigateTo({
			
						url: '/pages/login/login'
			
					})
					return;
				}
				
				this.showdel = false
				uni.navigateTo({
					url: '/pages/find/report?id='+this.aid + '&newtype=0'
				})
			},
			userLike(){
				
				let auth = db.get('auth');
				if (!auth) {
					uni.navigateTo({
			
						url: '/pages/login/login'
			
					})
					return;
				}
				
			
				this.$api.default.request('user/userLike', {
					uid: this.uid,
				}, 'POST').then((res) => {
					if (res.code == 1) {
						this.$common.successToShow(res.msg,()=>{
							this.getUserInfo()
						})
					}
				})
			},
			// 更换背景
			editBgImg() {
				let auth = db.get('auth');
				if (!auth) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				
				this.$common.chooseImage({}, (data) => {
					if (data) {
						this.saveUser({
							'bg_image': data
						})
					}
				})
			},
			saveUser(data) {
				let auth = db.get('auth');
				if (!auth) {
					uni.navigateTo({
			
						url: '/pages/login/login'
			
					})
					return;
				}
				
				this.$api.default.request('user/saveUser', data).then((res) => {
					if (res.code == 1) {
						this.userInfo = res.user
						this.$common.successToShow(res.msg)
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			toImRoom() {
				let auth = db.get('auth');
				if (!auth) {
					uni.navigateTo({
			
						url: '/pages/login/login'
			
					})
					return;
				}
				
				// this.$store.commit('createConversationActive', this.userInfo.membe_id)
				// var url = ''
				// if(this.userInfo.is_writer){
				// 	url = '/pages/tim/room?userType=1&showbox=1&uid=' + this.userInfo.membe_id
				// }else{
				// 	url = '/pages/tim/room'
				// }
				// uni.navigateTo({
				// 	url: url
				// })
				
				if(!this.isClick){
					
					return
				}
				this.isClick = false
				uni.request({
				    url: 'https://api.dreamyuewen.com/api/user/userInfo', 
				    data: {
				       uid: this.userInfo.membe_id,
				    },
				    header: {
				        token: db.get('auth')
				    },
				    success: (res) => {
				        uni.setStorageSync("userItem",res.data.user);
						
						uni.request({
						    url: 'https://api.dreamyuewen.com/api/user/userPageList', 
						    data: {
						       uid: this.userInfo.membe_id,
							   page: 1,
							   type: 1
						    },
						    header: {
						        token: db.get('auth')
						    },
						    success: (ress) => {
						        uni.setStorageSync("userPageList",ress.data.data.data);
								
								uni.request({
								    url: 'https://api.dreamyuewen.com/api/order/getTimOrderList', 
								    data: {
								       uid: this.userInfo.membe_id,
								    },
								    header: {
								        token: db.get('auth')
								    },
								    success: (resss) => {
										setTimeout(()=> {
											this.isClick = true
										}, 2000);
								        uni.setStorageSync("orderList",resss.data.data);
										
										TUIConversationService.switchConversation('C2C'+this.userInfo.membe_id);
										uni.navigateTo({
											url: '/TUIKit/components/TUIChat/index'
										})
								    }
								});
						    }
						});
				    }
				});
					
					
					
					
					
					
					
				// emits("handleSwitchConversation", item.conversationID);
				
			},
			getUserInfo() {
				// console.log(this.uid,777)
				this.$api.default.request('user/userInfo', {
					uid: this.uid
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.userInfo = res.user
						if (!res.user.is_writer) {
							this.navIndex = 3
						}
						this.showReport = false
						this.getList()
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			navTap(item) {
				this.list = {}
				this.rowList = []
				this.navIndex = item.id
				this.page = 1;
				this.getList()
			},
			// 沟通弹框
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			
			closedel() {
				this.showdel = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: rgba(242, 245, 242, 1);
	}

	

	.content {
		/* #ifdef MP-WEIXIN */
		padding-top: 40px;
		/* #endif */
		
		
		.tobox {
			padding: 20rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #ffffff;

			.serbox {
				width: 564rpx;
				display: flex;
				align-items: center;
				background: #F8F8F8;
				border-radius: 142px;
				height: 72rpx;
				padding: 0 26rpx;

				.serpic {
					width: 32rpx;
					height: 32rpx;
					flex-shrink: 0;
				}

				.serput {
					padding: 0 16rpx;
					width: 500rpx;
					font-size: 28rpx;
					color: #333333;
				}
			}

			.totxt {
				font-size: 28rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #45C4B0;
			}
		}

		.libox {
			background-color: #ffffff;
			margin-top: 20rpx;
			padding: 20rpx 54rpx 20rpx 40rpx;

			.qbox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;

				.qline {
					width: 4rpx;
					height: 28rpx;
					border-radius: 42px;
					opacity: 1;
					background: #45C4B0;
					flex-shrink: 0;
				}

				.qtitle {
					padding: 0 12rpx;
					flex-grow: 1;
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
				}

				.seemore {
					font-size: 24rpx;
					font-weight: normal;
					text-align: center;
					letter-spacing: 0em;
					color: #999999;
				}
			}

			.shibox {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				height: 100rpx;
				overflow: hidden;

				.shili {
					padding: 6rpx 16rpx;
					background: #F5F5F5;
					margin: 0 20rpx 12rpx 0;
					font-size: 20rpx;
					letter-spacing: 0.08em;
					color: #999999;
					border-radius: 4px;
				}
			}

			.shiactive {
				min-height: 100rpx;
				height: auto;
			}

			.qingbox {
				display: flex;
				align-items: center;
				justify-content: center;
				padding-top: 28rpx;

				.del {
					width: 32rpx;
					height: 32rpx;
				}

				.qingtxt {
					font-size: 24rpx;
					font-weight: normal;
					text-align: center;
					letter-spacing: 0em;
					color: #999999;
					padding-left: 10rpx;
				}
			}
		}

		.topli {
			background-color: #ffffff;
			height: 74rpx;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			display: flex;
			align-items: center;
			justify-content: center;

			.toptxt {
				width: 33.333%;
				text-align: center;
				font-size: 24rpx;
				color: #999999;
			}

			.active {
				font-weight: bold;
				color: #45C4B0;
			}
		}


		.showcase_item{
			padding: 24rpx 30rpx;
			background: #fff;
			margin-bottom: 20rpx;
			position: relative;
			overflow: hidden;
			
			.iconimg{
				position: absolute;
				right: 0;
				top: 50%;
				transform: translate(20%,-60%);
				width: 134px;
				height: 134px;
			}
			
			.showcase_head{
				display: flex;
				position: relative;
				align-items: center;
				image{
					width: 32rpx;
					height: 32rpx;
					object-fit: cover;
					margin-right: 8rpx;
				}
				.tit{
					width: 70%;
					font-size: 28rpx;
					font-weight: bold;
					color: #3D3D3D;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.tip{
					font-size: 20rpx;
					font-weight: normal;
					color: #999999;
					padding: 2rpx 8rpx;
					background: rgba(153, 153, 153, 0.15);
					border-radius: 8rpx;
					margin-left: 16rpx;
				}
				.jubox {
					position: absolute;
					top: 6rpx;
					right: 0rpx;
					width: 32rpx;
					height: 32rpx;
					z-index: 99;
					// border: 1px dashed #eeeeee;
				}
				.suc{
					background: rgba(69, 196, 176, 0.15);
					color: #45C4B0;
				}
				.err{
					color: #D63636;
					background: rgba(214, 54, 54, 0.15);
				}
				
			}
			.showcase_wrap{
				margin-top: 28rpx;
				 display: grid;
				 grid-gap: 28rpx 24rpx;
				 grid-template-columns: repeat(auto-fill, 300rpx);
				 padding-bottom: 20rpx;
				 border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				  .wrap_item{
					  display: flex;
					  align-items: center;
					  font-size: 20rpx;
					  color: #999999;
					  image{
						  width: 24rpx;
						  height: 24rpx;
						  object-fit: cover;
						  margin-right: 4rpx;
					  }
				  }
			  }
			  .bottom{
				  padding-top: 24rpx;
				  display: flex;
				  justify-content: space-between;
				  align-items: center;
				  .user{
					  display: flex;
					  justify-content: center;
					  align-items: center;
					  font-size: 24rpx;
					  color: #999999;
					  image{
						  width: 32rpx;
						  height: 32rpx;
						  border-radius: 50%;
						  object-fit: cover;
						  margin-right: 4rpx;
					  }
				  }
				  .sub{
					  border-radius: 24rpx;
					  padding: 10rpx 32rpx;
					  background: #45C4B0;
					  font-size: 20rpx;
					  font-weight: bold;
					  color: #FFFFFF;
				  }
				  
				  .sub2{
					  border-radius: 24rpx;
					  padding: 10rpx 32rpx;
					  background: #999;
					  font-size: 20rpx;
					  font-weight: bold;
					  color: #FFFFFF;
				  }
			  }
		}

		

		.empytView {
			padding-top: 200rpx;
		}
	}

	.empty {
		height: calc(1056rpx - 392rpx);
		background: #fff;
	}
	
	.currentState{
		padding: 10px 15px;
		padding-bottom: 0;
		background-color: #fff;
		
		image{
			width: 16px;
			height: 16px;
			margin-right: 2px;
		}
		.state{
			height: 24px;
			border-radius: 4px;
			font-family: 思源黑体;
			font-size: 12px;
			justify-content: center;
		}
		
		.state1{
			background: rgba(69, 196, 176, 0.15);
			color: #45C4B0;
		}
		
		.state2{
			background: rgba(153, 153, 153, 0.15);
			color: #999;
		}
		
		.state3{
			background: rgba(237, 50, 50, 0.15);
			color: #ED3232;
		}
	}
	
	.ping-box{
		padding: 10px 15px;
		
		.display-flex{
			height: 30px;
			justify-content: center;
			border-radius: 4px;
			background: #ED3232;
			
			image{
				width: 16px;
				height: 16px;
				margin-right: 8px;
			}
			
			text{
				font-family: 思源黑体;
				font-size: 12px;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
	
	.ping-box2{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 98px;
		
		.img{
			justify-content: center;
			width: 60px;
			height: 60px;
			background: #D8D8D8;
			border-radius: 50%;
			
			image{
				width: 32px;
				height: 32px;
			}
		}
		
		.view1{
			font-family: 思源黑体;
			font-size: 14px;
			font-weight: bold;
			color: #3D3D3D;
			margin-top: 20px;
		}
		
		.view2{
			margin-top: 4px;
			font-family: 思源黑体;
			font-size: 12px;
			color: #999999;
		}
	}
	
	.sticky-fixed {
		   /* #ifndef MP-WEIXIN */
		   position: sticky;
		   top: 88px;
		   /* #endif */
	       /* #ifdef MP-WEIXIN */
		   position: sticky;
	       top: 0;
	       /* #endif */
		   width: 100%;
	        z-index: 999;
			border-top: 1px solid rgba(153, 153, 153, 0.1);
	    }
	
	page {
		background: rgba(242, 245, 242, 1);
	}
	
	.content {
		position: relative;
		padding-bottom: 150rpx;
		
		.float-title{
			position: absolute;
			right: 0;
			top: 200rpx;
			padding: 3px 15px;
			background: linear-gradient(270deg, #333333 0%, rgba(51, 51, 51, 0) 100%);
			font-family: '思源黑体';
			font-size: 14px;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
		}
		
		.icon-jubao{
			position: absolute;
			right: 38rpx;
			top: 8rpx;
			width: 36rpx;
			height: 36rpx;
			z-index: 99;
		}
		
		.newicon{
			width: 24px;
			height: 24px;
		}
		
		.showcase_item{
			padding: 24rpx 30rpx;
			background: #fff;
			margin-bottom: 20rpx;
			position: relative;
			overflow: hidden;
			
			.iconimg{
				position: absolute;
				right: 0;
				top: 50%;
				transform: translate(20%,-60%);
				width: 134px;
				height: 134px;
			}
			
			.showcase_head{
				display: flex;
				position: relative;
				align-items: center;
				image{
					width: 32rpx;
					height: 32rpx;
					object-fit: cover;
					margin-right: 8rpx;
				}
				.tit{
					width: 70%;
					font-size: 28rpx;
					font-weight: bold;
					color: #3D3D3D;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.tip{
					font-size: 20rpx;
					font-weight: normal;
					color: #999999;
					padding: 2rpx 8rpx;
					background: rgba(153, 153, 153, 0.15);
					border-radius: 8rpx;
					margin-left: 16rpx;
				}
				.jubox {
					position: absolute;
					top: 6rpx;
					right: 0rpx;
					width: 32rpx;
					height: 32rpx;
					z-index: 99;
					// border: 1px dashed #eeeeee;
				}
				.suc{
					background: rgba(69, 196, 176, 0.15);
					color: #45C4B0;
				}
				.err{
					color: #D63636;
					background: rgba(214, 54, 54, 0.15);
				}
				
			}
			.showcase_wrap{
				margin-top: 28rpx;
				 display: grid;
				 grid-gap: 28rpx 24rpx;
				 grid-template-columns: repeat(auto-fill, 300rpx);
				 padding-bottom: 20rpx;
				 border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				  .wrap_item{
					  display: flex;
					  align-items: center;
					  font-size: 20rpx;
					  color: #999999;
					  image{
						  width: 24rpx;
						  height: 24rpx;
						  object-fit: cover;
						  margin-right: 4rpx;
					  }
				  }
			  }
			  .bottom{
				  padding-top: 24rpx;
				  display: flex;
				  justify-content: space-between;
				  align-items: center;
				  .user{
					  display: flex;
					  justify-content: center;
					  align-items: center;
					  font-size: 24rpx;
					  color: #999999;
					  image{
						  width: 32rpx;
						  height: 32rpx;
						  border-radius: 50%;
						  object-fit: cover;
						  margin-right: 4rpx;
					  }
				  }
				  .sub{
					  border-radius: 24rpx;
					  padding: 10rpx 32rpx;
					  background: #45C4B0;
					  font-size: 20rpx;
					  font-weight: bold;
					  color: #FFFFFF;
				  }
				  
				  .sub2{
					  border-radius: 24rpx;
					  padding: 10rpx 32rpx;
					  background: #999;
					  font-size: 20rpx;
					  font-weight: bold;
					  color: #FFFFFF;
				  }
			  }
		}
		
	
		.topbg {
			width: 100%;
			height: 520rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
		}
	
		.geng {
			top: 192rpx;
			width: 128rpx;
			height: 36rpx;
			border-radius: 8rpx;
			background: rgba(216, 216, 216, 0.3);
			text-align: center;
			line-height: 36rpx;
			font-size: 20rpx;
			color: #999999;
			position: absolute;
			top: 16rpx;
			right: 30rpx;
		}
	
		.zhibox {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			text-align: right;
			height: 80rpx;
			.zhili {
				padding: 6rpx 30rpx 6rpx 10rpx;
	
				.zhititle {
					font-size: 20rpx;
					color: #ffffff;
				}
	
				.zhitxt {
					font-size: 28rpx;
					text-align: right;
					letter-spacing: 0em;
					color: #FFFFFF
				}
				
			}
			.zhiImg{
				image{
					width: 250rpx;
					height: 80rpx;
					margin-bottom: -1rpx;
				}
			}
		}
		.jipic {
					width: 41px;
					height:19px;
					margin-right: 8rpx;
				}
		.main {
			background-color: #ffffff;
			margin-bottom: 20rpx;
			padding: 10rpx 30rpx 20rpx;
			position: relative;
	
			.myhead {
				position: absolute;
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				left: 30rpx;
				top: -80rpx;
			}
	
			.topnum {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding-bottom: 16rpx;
	
				.topli {
					width: 180rpx;
					text-align: center;
	
					.title {
						font-size: 32rpx;
						color: #3d3d3d;
					}
	
					.txt {
						font-size: 20rpx;
						color: #999999;
					}
				}
	
				.line {
					height: 40rpx;
					width: 1px;
					background-color: #d8d8d8;
					flex-shrink: 0;
				}
			}
	
			.dream {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 20rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #999999;
				padding-bottom: 12rpx;
	
				.onLine {
					display: flex;
					justify-content: center;
					align-items: center;
					padding-left: 20rpx;
	
					text {
						margin-right: 10rpx;
					}
				}
				
				image{
					width: 30rpx;
					height: 30rpx;
				}
				
				text{
					font-family: '思源黑体';
					font-size: 10px;
					color: #999999;
					margin-left: 8rpx;
					margin-right: 18rpx;
				}
				
				.dian {
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background: #45C4B0;
				}
				
				.txt {
					font-size: 20rpx;
					font-weight: normal;
					letter-spacing: 0em;
					padding-left: 8rpx;
					color: #45C4B0;
				}
				
				.dian2{
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background: #999;
				}
				.txt2{
					font-size: 20rpx;
					font-weight: normal;
					letter-spacing: 0em;
					padding-left: 8rpx;
					color: #999;
				}
				
				
			}
			
			.namebox {
				display: flex;
				align-items: center;
				padding-bottom: 8rpx;
	
				.nametxt {
					font-size: 28rpx;
					color: #3D3D3D;
					padding-right: 8rpx;
	
				}
	
				.jipic {
					width: 41px;
					height:19px;
				}
	
				.biepic {
					width: 41px;
					height:19px;
					margin-left: 4px;
				}
			}
	
			.ribox {
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				border-radius: 15rpx;
	
				.rili {
					display: inline-block;
					vertical-align: middle;
					// max-width: 180rpx;
					white-space: nowrap;
					// overflow: hidden;
					// text-overflow: ellipsis;
					background: rgba(153, 153, 153, 0.1);
					padding: 6rpx 12rpx;
					border-radius: 178px;
					font-size: 24rpx;
					color: #3D3D3D;
					margin-right: 16rpx;
					margin-bottom: 16rpx;
				}
				.rili_nback{
					background:none;
				}
			}
	
			.ritxt {
				font-size: 20rpx;
				color: #999999;
				padding-bottom: 20rpx;
			}
	
			.gbox {
				display: flex;
				align-items: center;
				justify-content: space-between;
	
				.gli {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 330rpx;
					height: 60rpx;
					border-radius: 8rpx;
					box-sizing: border-box;
					border: 1px solid #45C4B0;
					.a_jia{
						color: #45C4B0;
						font-size: 32rpx;
						margin-bottom: 5rpx;
					}	
					.gpic {
						width: 32rpx;
						height: 32rpx;
					}
	
					.gtxt {
						font-size: 24rpx;
						font-weight: bold;
						color: #45C4B0;
						padding-left: 12rpx;
					}
				}
	
				.gzhu {
					text-align: center;
					line-height: 60rpx;
					width: 330rpx;
					height: 60rpx;
					border-radius: 8rpx;
					box-sizing: border-box;
					border: 1px rgba(153, 153, 153, 0.1);
					background: rgba(153, 153, 153, 0.1);
					font-size: 24rpx;
					color: #999999;
					font-weight: bold;
				}
	
				.gou {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 330rpx;
					height: 60rpx;
					border-radius: 8rpx;
					box-sizing: border-box;
					background-color: #45C4B0;
					border: 1px solid #45C4B0;
	
					.goupic {
						width: 32rpx;
						height: 32rpx;
					}
	
					.goutxt {
						font-size: 24rpx;
						color: #ffffff;
						padding-left: 12rpx;
					}
				}
			}
		}
	
		.wrap {
			// padding: 0 30rpx;
			.topli {
				height: 74rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #ffffff;
				.toptxt {
					width: 33.33%;
					text-align: center;
					font-size: 24rpx;
					color: #999999;
				}
	
				.active {
					font-weight: bold;
					color: #45C4B0;
				}
			}
	
			.mengBox {
				padding: 20rpx 30rpx;
				background-color: #ffffff;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
	
				.left {
					width: 400rpx;
					flex-shrink: 0;
	
					.ltop {
						display: flex;
						align-items: center;
						padding-bottom: 18rpx;
	
						.lpic {
							width: 32rpx;
							height: 32rpx;
							flex-shrink: 0;
						}
	
						.ltitle {
							padding-left: 6rpx;
							font-size: 28rpx;
							font-weight: bold;
							color: #3D3D3D;
							
						}
					}
	
					.ltxt {
						font-size: 20rpx;
						color: #3D3D3D;
	
						text {
							padding-left: 10rpx;
							font-size: 20rpx;
							color: #999999;
						}
					}
				}
	
				.ytxt {
					white-space: nowrap;
					font-size: 36rpx;
					font-weight: bold;
					color: #45C4B0;
	
					text {
						font-size: 20rpx;
						color: #999999;
						padding-left: 2rpx;
					}
				}
			}
		}
	
		.pingbox {
			background-color: #ffffff;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;
	
			.ptop {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				padding-bottom: 12rpx;
	
				.head {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					flex-shrink: 0;
				}
	
				.pcen {
					flex-grow: 1;
					padding: 0 12rpx;
	
					.nabox {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-bottom: 6rpx;
						.top{
							display: flex;
							align-items: center;
						}
						.natitle {
							font-size: 28rpx;
							font-weight: bold;
							color: #3D3D3D;
							padding-right: 12rpx;
							padding-bottom: 6rpx;
						}
	
						.good {
							padding: 2rpx 8rpx;
							background: rgba(44, 211, 124, 0.15);
							font-size: 20rpx;
							font-weight: normal;
							letter-spacing: 0.08em;
							color: #2CD37C;
						}
						
						.red{
							background: rgba(236, 87, 109, 0.15);
							color: #ec576d;
						}
						
						.yellow{
							background: rgba(255, 170, 0, 0.15);
							color: #ffaa00;
						}
					}
	
					.time {
						display: flex;
						align-items: center;
						.starbox_wrap{
							display: flex;
							align-items: center;
							margin-right: 32rpx;
							.tit{
								font-size: 20rpx;
								color: #999999;
								white-space: nowrap;
							}
						}
						.spic {
							width: 16rpx;
							height: 16rpx;
							margin-left: 2px;
						}
					}
				}
	
				.starbox {
						font-size: 24rpx;
						color: #999999;
						
						
					
				}
			}
	
			.datxt {
				font-size: 24rpx;
				color: #3D3D3D;
				line-height: 34rpx;
				margin-bottom: 20rpx;
				
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				word-break: break-all;
			}
	
			.jiebox {
				padding: 20rpx;
				border-radius: 8rpx;
				opacity: 1;
				background: #F8F8F8;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
	
				.left {
					flex-shrink: 0;
	
					.ltop {
						display: flex;
						align-items: center;
						padding-bottom: 18rpx;
	
						.lpic {
							width: 32rpx;
							height: 32rpx;
							flex-shrink: 0;
						}
	
						.ltitle {
							padding-left: 6rpx;
							font-size: 28rpx;
							font-weight: bold;
							color: #3D3D3D;
							width: 400rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
	
					.ltxt {
						font-size: 20rpx;
						color: #3D3D3D;
	
						text {
							padding-left: 10rpx;
							font-size: 20rpx;
							color: #999999;
						}
					}
				}
	
				.ytxt {
					font-size: 36rpx;
					font-weight: bold;
					color: #45C4B0;
					white-space: nowrap;
	
					text {
						font-size: 20rpx;
						color: #999999;
						padding: 0 8rpx;
					}
				}
			}
		}
	
		.taibox {
			padding: 20rpx 30rpx;
			background-color: #ffffff;
			margin-bottom: 20rpx;
			position: relative;
			.jubox{
				position: absolute;
				top: 25rpx;
				right: 25rpx;
				width: 32rpx;
				height: 32rpx;
				// border: 1px dashed #eeeeee;
			}
			.taitop {
				display: flex;
				align-items: center;
				padding-bottom: 12rpx;
				.taihead {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					flex-shrink: 0;
				}
	
				.taiyou {
					padding: 0 12rpx;
					flex: 1;
	
					.yoa {
						display: flex;
						align-items: center;
						padding-bottom: 8rpx;
	
						.nametxt {
							font-size: 28rpx;
							color: #3D3D3D;
							padding-right: 8rpx;
							font-weight: bold;
						}
	
						.jipic {
							width: 41px;
							height:19px;
						}
	
						.biepic {
							width: 41px;
							height:19px;
							margin-left: 4px;
						}
					}
	
					.baobox {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
	
						.baofen {
							padding: 2rpx 8rpx;
							background: rgba(243, 122, 165, 0.15);
							border-radius: 4px;
							margin-right: 8rpx;
							flex-shrink: 0;
							font-size: 20rpx;
							letter-spacing: 0.08em;
							color: #F37AA5;
						}
						
						.baofen2 {
							padding: 2rpx 8rpx;
							background: rgba(69, 196, 176, 0.07);
							border-radius: 4px;
							margin-right: 8rpx;
							flex-shrink: 0;
							font-size: 20rpx;
							letter-spacing: 0.08em;
							color: #45C4B0;
						}
	
						.baotime {
							font-size: 24rpx;
							letter-spacing: 0em;
							color: #999999;
							
							.tag-i{
								background: rgba(#45C4B0, .15);
								color: #45C4B0;
								font-size: 10px;
								padding: 1px 4px;
								border-radius: 4px;
								margin-right: 4px;
							}
						}
					}
				}
			}
	
			.baotitle {
				font-size: 28rpx;
				color: #3D3D3D;
				padding-bottom: 6rpx;
			}
	
			.baotxt {
				font-size: 24rpx;
				color: #3D3D3D;
				line-height: 38rpx;
				padding-bottom: 20rpx;
			}
	
			.chebox {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				padding-bottom: 20rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
	
				.chepic:last-child {
					margin-right: 0;
				}
	
				.chepic {
					width: 218rpx;
					height: 218rpx;
					margin-right: 12rpx;
				}
				
				.fupic {
					// width: 100%;
					// margin-bottom: 20rpx;
				}
				
				.doubleImg{
					width: 100%;
					flex-wrap: wrap;
					justify-content: space-between;
					
					image{
						width: 168px;
						height: 168px;
						margin-bottom: 6px;
					}
				}
				
				.triImg{
					width: 100%;
					flex-wrap: wrap;
					
					image{
						width: 105px;
						height: 106px;
						margin-right: 6px;
						margin-bottom: 6px;
					}
					
					image:nth-of-type(3n){
						margin-right: 0;
					}
				}
			}
	
			.zanbox {
				display: flex;
				align-items: center;
				padding-top: 18rpx;
	
				.zanli {
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
	
					.zanpic {
						width: 28rpx;
						height: 28rpx;
						flex-shrink: 0;
					}
	
					.zantxt {
						padding-left: 8rpx;
						font-size: 20rpx;
						letter-spacing: 0.08em;
						color: #999999;
					}
				}
			}
		}
	
		.baibox {
			background-color: #ffffff;
			width: 474rpx;
			border-radius: 8px;
			opacity: 1;
			padding: 100rpx 30rpx 40rpx;
			position: relative;
		
			.baihead {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				position: absolute;
				top: -80rpx;
				left: 50%;
				margin-left: -80rpx;
			}
		
			.nickname {
				font-size: 32rpx;
				padding-bottom: 8rpx;
				font-weight: bold;
				text-align: center;
				color: #3D3D3D;
			}
		
			.xutxt {
				font-size: 24rpx;
				text-align: center;
				color: #999999;
				padding-bottom: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 28rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}
			}
				.exhibit{
					display: grid;
					grid-gap: 16rpx 16rpx;
					justify-content: space-between;
					grid-template-columns: repeat(auto-fill, 218rpx);
					.item{
						width: 218rpx;
						height: 218rpx;
						background: rgba(216, 216, 216, 0.3);
						border: 8rpx;
						
						image{
							width: 218rpx;
							height: 218rpx;
							border-radius: 0.5em;
						}
					}
				}
			.gexu {
				padding-bottom: 20rpx;
				max-height: 450rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				margin-bottom: 20rpx;
		
				.geli {
					display: flex;
					align-items: flex-start;
					padding-bottom: 20rpx;
		
					.getitle {
						font-size: 28rpx;
						font-weight: bold;
						letter-spacing: 0em;
						color: #3D3D3D;
						flex-shrink: 0;
					}
		
					.getxt {
					
						// padding-top: 1rpx;
						
						font-size: 26rpx;
						color: #999999;
						line-height: 35rpx;
					}
				}
			}
		
			.fabox {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 86rpx;
				border-radius: 8px;
				opacity: 1;
				background: #45C4B0;
				margin-top: 20rpx;
		
				.fapic {
					width: 40rpx;
					height: 40rpx;
				}
		
				.fatxt {
					font-size: 28rpx;
					font-weight: 500;
					padding-left: 14rpx;
					letter-spacing: 0em;
					color: #FFFFFF;
				}
			}
		
		}
		.closepic {
			width: 40rpx;
			height: 40rpx;
			margin: 40rpx auto 0;
		}
		.mask {
			background: #F2F5F2;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			overflow: hidden;
		
			.matop {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 68rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				background-color: #ffffff;
		
				.mapic {
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
				}
		
				.matxt {
					flex-grow: 1;
					font-size: 28rpx;
					padding: 0 16rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
				}
			}
		
			.qubox {
				line-height: 120rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
				height: 120rpx;
				opacity: 1;
				background: #FFFFFF;
			}
		}
		.empytView{
			background-color: #ffffff;
		}
	}
	
	.content {
		/* #ifdef MP-WEIXIN */
		padding-top: 200px;
		/* #endif */
		/* #ifndef MP-WEIXIN */
		padding-top: 180px;
		/* #endif */
		
		.newicon{
			width: 24px;
			height: 24px;
		}
		
		.cl1{
				height: 48rpx;
				width: 48rpx;;
				position: relative;
				top:110rpx;
		}
		.zhezhao{
			height: 100vh;
			position: fixed;
			top:0rpx;
			right:0px;
			width: 100%;
			z-index:101;
			background: rgba(51, 51, 51, 0.6);
		}
		.biaoqian{
			position: fixed;
			float: left;
			top:18%;
			z-index:102;
			border-radius: 0.5em;
			background: #fff;
			width: 70%;
			margin-left: 15%;
			text-align: center;
			.top{
				padding-top: 50rpx;
				font-weight: 600;
				font-size: 28rpx;
				color: #000;
				float: left;
			    text-align: center;
				width: 80%;
				margin-left: 10%;
			}
			
			.tab{
				padding-top: 10rpx;
				font-size: 21rpx;
				font-weight: 600;
				width:90%;
				margin-left: 5%;
				float: left;
				text-align: center;
				view{
					background: rgba(153, 153, 153, 0.2);
					padding: 2rpx 20rpx 2rpx 20rpx;
					margin-left: 16rpx;
					border-radius: 0.5em;
					text-align: center;
					float: left;
					margin-top: 10rpx;
				}
			}
			
			.not_like{
				width: 100%;
				text-align: center;
				float: left;
				color:#999;
				font-size: 27rpx;
				margin-top:40rpx;
			}
			
			.line{
				margin-top:30rpx;
				width:88%;
				margin-left:6%;
				margin-bottom: 40rpx;
				float: left;
				height: 0px;
				opacity: 1;
				border: 1rpx solid rgba(153, 153, 153, 0.1);
			}
			.cont_t{
				border-radius: 8px;
				opacity: 1;
				background: rgba(69, 196, 176, 0.05);
				width: calc(100% - 80rpx);
				margin: 0 auto;
				// margin-top: 40rpx;
				color: #45C4B0;
				justify-content: center;
				
				.t1{
					
					height: 86rpx;
					image{
						width:33rpx;;
						height: 33rpx;
					}
					.tex{
						 margin-left: 10rpx;
					}
				}
			
			}
			
			.cont_t-gray{
				background: #F2F5F2;
				color: #999;
			}
			.cont_b{
				width: calc(100% - 80rpx);
				margin: 0 auto;
				margin-top: 20rpx;
				background: rgba(69, 196, 176, 0.05);
				color: #45C4B0;
				justify-content: center;
				
				.t1{
					height: 86rpx;
					justify-content: center;
					
					image{
						width:33rpx;;
						height: 33rpx;
					}
					.tex{
						 white-space: nowrap;
						 margin-left: 10rpx;
					}
				}
				
				
			}
		}
		
		.tbg {
			width: 100%;
			height: 550rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
		}
	
		.jobox {
			background-color: #ffffff;
			margin-bottom: 20rpx;
			padding: 72rpx 30rpx 20rpx;
			position: relative;
	
			.dingbox {
				height: 160rpx;
				position: absolute;
				left: 30rpx;
				width: 690rpx;
				top: -110rpx;
				z-index: 22;
				display: flex;
				align-items: flex-end;
	
				.head {
					width: 160rpx;
					height: 160rpx;
					border-radius: 12px;
					flex-shrink: 0;
					box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
				}
	
				.dingyou {
					flex-grow: 1;
					padding-left: 12rpx;
	
					.title {
						font-size: 36rpx;
						font-weight: bold;
						letter-spacing: 0em;
						color: #FFFFFF;
						padding-bottom: 8rpx;
					}
	
					.txt {
						font-size: 20rpx;
						padding-bottom: 20rpx;
						color: #FFFFFF;
	
						text {
							padding-left: 20rpx;
							font-size: 20rpx;
							color: #FFFFFF;
						}
					}
	
					.xiabox {
						display: flex;
						align-items: center;
						justify-content: space-between;
	
						.headbox {
							position: relative;
							height: 40rpx;
	
							.pic {
								width: 40rpx;
								height: 40rpx;
								position: absolute;
								left: 0;
								top: 0;
								z-index: 8;
								border-radius: 50%;
								border: 2px solid #ffffff;
							}
	
							.pic:nth-child(2) {
								z-index: 7;
								top: 0;
								left: 36rpx;
							}
	
							.pic:nth-child(3) {
								z-index: 6;
								top: 0;
								left: 72rpx;
							}
	
							.pic:nth-child(4) {
								z-index: 5;
								top: 0;
								left: 108rpx;
							}
	
							.pic:nth-child(5) {
								z-index: 4;
								top: 0;
								left: 144rpx;
							}
	
							.pic:nth-child(6) {
								z-index: 3;
								top: 0;
								left: 180rpx;
							}
	
							.pic:nth-child(7) {
								z-index: 2;
								top: 0;
								left: 36rpx;
							}
						}
	
						.yiadd {
							width: 104rpx;
							height: 40rpx;
							border-radius: 4px;
							opacity: 1;
							background: rgba(153, 153, 153, 0.1);
							text-align: center;
							line-height: 40rpx;
							font-size: 24rpx;
							font-weight: bold;
							color: #999999;
						}
	
						.add {
							width: 104rpx;
							height: 40rpx;
							border-radius: 4px;
							opacity: 1;
							background: #45C4B0;
							text-align: center;
							line-height: 40rpx;
							font-size: 24rpx;
							font-weight: bold;
							color: #FFFFFF;
						}
					}
				}
			}
	
			.jietxt {
				font-size: 20rpx;
				color: #999999;
				line-height: 28rpx;
			}
		}
	
		.lieli:first-child {
			padding-top: 0;
		}
	
		.hotbox {
			background-color: #ffffff;
			margin-bottom: 20rpx;
			padding: 20rpx 30rpx 2rpx;
	
			.biao {
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;
	
				.line {
					width: 4rpx;
					height: 28rpx;
					border-radius: 42px;
					opacity: 1;
					background: #45C4B0;
				}
	
				.btitle {
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					padding-left: 12rpx;
					color: #3D3D3D;
				}
	
				.tuiyou {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					float: right;
					position: relative;
					left: 57%;
	
					.tuipic {
						width: 44rpx;
						height: 44rpx;
					}
	
					.tuitxt {
						font-size: 28rpx;
						color: #999999;
						padding-left: 10rpx;
					}
				}
	
				
			}
	
			.lieli:last-child {
				border: none;
			}
	
			.lieli {
				padding: 16rpx 26rpx 16rpx 10rpx;
				display: flex;
				align-items: flex-start;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				
				.rankicon{
					width: 18rpx;
					height: 32rpx;
				}
	
				.onetxt {
					padding-top: 2rpx;
					font-size: 26rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #45C4B0;
					font-style: italic;
					flex-shrink: 0;
				}
	
				.twotxt {
					padding-top: 2rpx;
					font-size: 26rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #9AEBA3;
					font-style: italic;
					flex-shrink: 0;
				}
	
				.threetxt {
					padding-top: 2rpx;
					font-size: 26rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #DAFDBA;
					font-style: italic;
					flex-shrink: 0;
				}
				
				.othertxt{
					padding-top: 2rpx;
					font-size: 26rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #999;
					font-style: italic;
					flex-shrink: 0;
				}
	
				.lieyou {
					padding-left: 12rpx;
					flex-grow: 1;
	
					.top {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-bottom: 8rpx;
	
						.title {
							font-size: 24rpx;
							font-weight: bold;
							letter-spacing: 0em;
							color: #3D3D3D;
							flex-shrink: 0;
						}
	
						.bao {
							flex-shrink: 0;
							width: 32rpx;
							height: 32rpx;
							line-height: 32rpx;
							color: #ffffff;
							border-radius: 4px;
							opacity: 1;
							background: #45C4B0;
							font-size: 20rpx;
							color: #FFFFFF;
							font-style: italic;
							margin: 0 8rpx;
							font-family: YouSheBiaoTiHei;
						}
	
						.baoactive {
							background: #9AEBA3;
						}
						
						.f-icon{
							width: 32rpx;
							height: 32rpx;
							margin-left: 4px;
						}
	
						.wtxt {
							flex-grow: 1;
							font-size: 20rpx;
							text-align: right;
							letter-spacing: 0.08em;
							color: #999999;
						}
					}
	
					.di {
						display: flex;
						align-items: center;
	
						.dipic {
							width: 28rpx;
							height: 28rpx;
							border-radius: 50%;
						}
	
						.ditxt {
							width: 580rpx;
							font-size: 20rpx;
							font-weight: normal;
							letter-spacing: 0.08em;
							color: #999999;
							padding-left: 8rpx;
						}
					}
				}
			}
	
			.lieli:nth-child(1) {
				padding-top: 0 !important;
			}
		}
	
		.numtxt {
			color: #ffffff;
			font-size: 20rpx;
			position: absolute;
			right: 0rpx;
			top: -50rpx;
			min-width: 16px;
			height: 16px;
			line-height: 16px;
			text-align: center;
			background: rgba(51, 51, 51, 0.9);
			border-radius: 50%;
		}
	
		.cnt {
			padding: 8rpx 12rpx 20rpx;
	
			.carbox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 8rpx;
				position: relative;
	
				.title {
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 0em;
					color: #3D3D3D;
				}
	
				.jupic {
					width: 32rpx;
					height: 32rpx;
					flex-shrink: 0;
				}
			}
	
			.qli {
				background: rgba(153, 153, 153, 0.102);
				padding: 2px 8px 2px 6px;
				border-radius: 89px;
				font-family: 思源黑体;
				font-size: 12px;
				// font-weight: bold;
				color: #999;
				display: inline-block;
				margin-bottom: 16rpx;
				margin-right: 16rpx;
			}
	
			.haobox {
				display: flex;
				align-items: center;
				justify-content: space-between;
	
				.wen {
					padding: 2rpx 8rpx;
					background: rgba(243, 122, 165, 0.15);
					border-radius: 4px;
					margin-right: 8rpx;
					flex-shrink: 0;
					font-size: 20rpx;
					letter-spacing: 0.08em;
					color: #F37AA5;
				}
	
				.ybox {
					display: flex;
					align-items: center;
					justify-content: flex-end;
	
					.hart {
						width: 32rpx;
						height: 32rpx;
					}
	
					.ytxt {
						font-size: 20rpx;
						text-align: right;
						letter-spacing: 0.08em;
						color: #999999;
						padding-left: 4rpx;
					}
				}
			}
	
		}
	
		.mask {
			background: #F2F5F2;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			overflow: hidden;
	
			.matop {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 68rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				background-color: #ffffff;
	
				.mapic {
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
				}
	
				.matxt {
					flex-grow: 1;
					font-size: 28rpx;
					padding: 0 16rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
				}
			}
	
			.qubox {
				line-height: 120rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
				height: 120rpx;
				opacity: 1;
				background: #FFFFFF;
			}
		}
	
		.addpic {
			position: fixed;
			bottom: 60rpx;
			right: 60rpx;
			width: 80rpx;
			height: 80rpx;
			z-index: 666;
		}
	
		.tuichu {
			background-color: #ffffff;
			border-radius: 8px;
			width: 480rpx;
			padding: 50rpx 0 40rpx;
			text-align: center;
	
			.tuititle {
				font-size: 32rpx;
				color: #222222;
				font-weight: bold;
				padding-bottom: 100rpx;
			}
	
			.quren {
				display: flex;
				align-items: center;
				justify-content: center;
	
				.quli {
					width: 180rpx;
					height: 60rpx;
					background-color: #F2F5F2;
					border-radius: 5rpx;
					margin: 0 20rpx;
					line-height: 60rpx;
					font-size: 26rpx;
					color: #333;
				}
	
				.active {
					background-color: #45C4B0;
					color: #ffffff;
				}
			}
		}
		
	}
	
	.emptyImg {
		padding: 12rpx;
		background: #F2F5F2;
		border-radius: 8px;
		
		.lines {
			// max-height: 400rpx;
			text-overflow:ellipsis;
			font-family: '思源黑体';
			font-size: 10px;
			color: #3D3D3D;
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: 6;
			-webkit-box-orient: vertical;
		}
	}
</style>